<template>
  <!--  -->
  <div>
    <!-- 给子组件绑定一个自定义事件，第一种实现方法：@ 方法实现 -->
    <!-- 使用这种方法，完成挂载便立即绑定事件，不够灵活 -->
    <!-- <School @custom="getSchoolName" /> -->
    <!-- 给子组件绑定一个自定义事件，第二种实现方法：ref + mounted 方法实现 -->
    <School ref="sch" />
  </div>
</template>

<script>
import School from './components/School'

export default {
  name: 'App',
  components: {
    School
  },
  methods: {
    // 形参的个数，要与传来的个数对应上
    getSchoolName(name, address, age) {
      console.log(name, address, age)
    }
  },
  mounted() {
    // 当触发 sch实例身上的 custom事件时，调用 getSchoolName方法
    // 该种方法更加灵活，如在挂载完毕后，延迟3秒再为 school组件实例对象绑定事件
    setTimeout(() => {
      this.$refs.sch.$on('custom', this.getSchoolName)
    }, 3000)
  }
}
</script>

<style>
</style>